<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div :id="idname" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
export default {
  props: {
    idname: {
      type: String,
      required: true,
    },
    datalist: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  watch: {
    datalist: {
      handler(val, oldVal) {
        this.chartColumn();
      },
      deep: true,
    },
  },
  methods: {
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    chartColumn(type) {
      let dom = this.idname;
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        series: [
          {
            name: "配送金额占比",
            type: "pie",
            radius: [20, 70],
            roseType: "radius",
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: this.datalist,
            // data: [
            //   {
            //     value: 5,
            //     name: "rose2",
            //     itemStyle: {
            //       color: "RGBA(0, 134, 255, 1)",
            //     },
            //   },
            // ],
          },
        ],
      };

      this.drawLine(dom, option);
    },
  },
  mounted() {
    this.chartColumn();
  },
};
</script>

<style>
</style>
